<template>
  <div>
    <div style="display: flex; height: 37px; margin-bottom: 20px">
      <div style="width: 70px; margin-right: 25px; line-height: 37px">
        企业名称
      </div>
      <el-input disabled :value="companyData.orgName"></el-input>
    </div>
    <div class="box">
      <div class="tit">业务范围</div>
      <div class="boxs">
        <div
          class="box-item"
          v-for="item in YWFW"
          :key="item.code"
          :class="checkedList.includes(item.code) ? 'checkedStyle' : ''"
          :style="{ cursor: 'pointer' }"
          @click="choose(item.code)"
        >
          <img
            :src="'data:image/png;base64,' + item.imageBase64"
            class="item-img"
          />
          <div class="item-name">
            {{ item.name }}
            <i v-if="checkedList.includes(item.code)" class="el-icon-check"></i>
          </div>
        </div>
      </div>
    </div>
    <el-row style="text-align: center">
      <el-col>
        <el-button
          v-loading="loading"
          class="dialogBtn"
          type="primary"
          @click="sqSave"
          >保存</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getBusinessApi, saveCompanyRegisterSqApi } from '@/api/companyRegister'
export default {
  name: 'BusinessScope',
  props: ['id', 'companyData'],
  data() {
    return {
      checkedList: [],
      YWFW: [],
      loading: false
    }
  },
  created() {
    this.getBusiness()
    this.getInfoData()
  },
  methods: {
    getInfoData() {
      this.checkedList = this.companyData.businessScope?.split(',') || []
    },
    choose(item) {
      if (this.isPreview) return
      if (this.checkedList.includes(item)) {
        this.checkedList = this.checkedList.filter((value) => value !== item)
      } else {
        this.checkedList.push(item)
      }
    },
    async getBusiness() {
      const res = await getBusinessApi()
      this.YWFW = res.data.list
      console.log(res)
    },
    async sqSave() {
      if (!this.checkedList.join(',')) return this.$message('请选择业务范围')
      this.loading = true
      try {
        const res = await saveCompanyRegisterSqApi({
          businessScope: this.checkedList.join(','),
          id: this.id
        })
        console.log(res)
        if (res.code == 200) {
          this.$message({
            message: res.data.content,
            type: 'success',
            duration: 2000
          })
          this.$emit('sqSave')
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  .tit {
    width: 70px;
    height: 100%;
    margin-right: 25px;
  }
  .boxs {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
    height: 100%;
    .box-item {
      margin-right: 35px;
      margin-bottom: 20px;
      border: 1px solid #fff;
      .item-img {
        width: 180px;
        height: 100px;
      }
      .item-name {
        position: relative;
        .el-icon-check {
          position: absolute;
          color: #81b337;
          font-size: 20px;
          right: 15px;
          bottom: 0px;
        }
      }
    }
  }
}
.checkedStyle {
  border: 1px solid skyblue !important;
}
</style>
